<template>
    <div style="padding: 0 20px;">
        <Tabs value="name1">
            <TabPane label="电话端" name="name1" style="height: 630px;">
                <Row :gutter="20">
                    <!--
                    说明:
                        1. iview的Col在vue环境下会报错, 只能换成icol.
                    -->
                    <i-col span="12">
                        <Form ref="query" label-position="right" :label-width="100" inline style="float: left;">
                            <FormItem label="选择时间段" prop="startTime">
                                <DatePicker type="daterange" placement="bottom-end" format="yyyy-MM-dd"
                                            placeholder="选择时间段" style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="id">
                                <Input type="text"
                                       class="input-item"
                                       placeholder="id"
                                       clearable
                                       v-model="query.id"
                                       style="width:200px;"
                                />
                            </FormItem>
                        </Form>
                    </i-col>
                    <i-col span="12">
                        <div style="float: right;">
                            <Button type="success" @click="search">搜索</Button>
                            <Button type="success" @click="download">下载excel</Button>
                        </div>
                    </i-col>
                </Row>
                <Row>
                    <Table ref="table1" border :columns="columns7" :data="data7" @on-row-click="rowClick">
                        <template slot-scope="{ row }" slot="id">
                            <strong>{{ row.id }}</strong>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
                            <Button type="error" size="small" @click="remove(index)">Delete</Button>
                        </template>
                    </Table>
                    <Page :total="query.total" show-total show-sizer :current="query.pageNumber" :page-size="query.pageSize" @on-change="pageChange"  />
                </Row>
                <Row>
                    <i-col span="12">

                    </i-col>
                </Row>
            </TabPane>
            <TabPane label="spin" name="name2">
                <Row>
                    <Button type="success" @click="openSpin">打开spin, 3秒后关闭</Button>
                </Row>
            </TabPane>
            <TabPane label="自动完成输入框" name="name3" style="height: 500px;">
                <Row>
                    <i-col :span="3">
                        搜索多种类型的数据并进行展示:
                    </i-col>
                    <i-col :span="9">
                        <AutoComplete
                                v-model="autoCompleteChange"
                                icon="ios-search"
                                placeholder="input here"
                                style="width: 300px; text-align: left;">
                            <div class="demo-auto-complete-item" v-for="(item, index) in autoCompleteData1" :key="index">
                                <div class="demo-auto-complete-group">
                                    <span><b>{{ item.title }}</b></span>
                                </div>
                                <!--
                                说明:
                                    1. 这里绑定click事件是无效的, 必须通过click.native这样实现.
                                -->
                                <Option v-for="option in item.children" :value="option.title" :key="option.title" @click.native="changeOne(item.type, option.id)">
                                    <span class="demo-auto-complete-title">{{ option.title }}</span>
                                </Option>
                            </div>
                        </AutoComplete>
                    </i-col>
                    <i-col :span="12">
                        选择的值: {{autoCompleteChange}}
                    </i-col>
                </Row>
            </TabPane>
            <TabPane label="各种input" name="name4" style="height: 500px;">
                <Row style="margin: 10px;">
                    <i-col :span="4">
                        最简单的input-将值绑定到string类型:
                    </i-col>
                    <i-col :span="10">
                        <Input v-model="inputType.strType" placeholder="Enter something..." style="width: 300px" />
                    </i-col>
                    <i-col :span="10">
                        {{inputType.strType}}
                    </i-col>
                </Row>
                <Row style="margin: 10px;">
                    <i-col :span="4">
                        最简单的input-将值绑定到number类型:
                    </i-col>
                    <i-col :span="10">
                        <Input v-model="inputType.numType" placeholder="Enter something..." style="width: 300px" />
                    </i-col>
                    <i-col :span="10">
                        {{inputType.numType}}
                    </i-col>
                </Row>
                <Row style="margin: 10px;">
                    <i-col :span="4">
                        checkbox的禁用与js代码赋值(checkbox还可以绑定到boolean值上, 但是没有switch组件好用):
                    </i-col>
                    <i-col :span="10">
                        <CheckboxGroup v-model="checkboxType.checkboxValue1">
                            <Checkbox :label="1">数字1</Checkbox>
                            <Checkbox :label="2" :disabled="true">数字2</Checkbox>
                            <Checkbox :label="3">数字3</Checkbox>
                        </CheckboxGroup>
                        <Button type="success" @click="checkboxValue1Change(2, 'check')">选中2</Button>
                        <Button type="primary" @click="checkboxValue1Change(2, 'unCheck')">取消选中2</Button>
                    </i-col>
                    <i-col :span="10">
                        {{checkboxType.checkboxValue1}}
                    </i-col>
                </Row>
                <Row style="margin: 10px;">
                    <i-col :span="4">
                        switch组件绑定boolean值:
                    </i-col>
                    <i-col :span="10">
                        <i-switch v-model="switchType.switchValue1" @on-change="switchTypeValue1Change" />
                        <i-switch v-model="switchType.switchValue2" :disabled="true" />
                        <i-switch v-model="switchType.switchValue3">
                            <span slot="open">开</span>
                            <span slot="close">关</span>
                        </i-switch>
                    </i-col>
                    <i-col :span="10">
                        {{switchType.switchValue1}}
                        {{switchType.switchValue2}}
                        {{switchType.switchValue3}}
                    </i-col>
                </Row>
                <Row style="margin: 10px;">
                    <i-col :span="24">
                        <Row>
                            <i-col :span="4">正常的数字输入框:</i-col>
                            <i-col :span="10">
                                <InputNumber :max="10" :min="1" v-model="inputNumberType.inputNumberValue1"></InputNumber>
                            </i-col>
                            <i-col :span="10">{{inputNumberType.inputNumberValue1}}</i-col>
                        </Row>
                        <Row>
                            <i-col :span="4">只允许通过按钮改变:</i-col>
                            <i-col :span="10">
                                <InputNumber :editable="false" :max="10" :min="1" v-model="inputNumberType.inputNumberValue2"></InputNumber>
                            </i-col>
                            <i-col :span="10">{{inputNumberType.inputNumberValue2}}</i-col>
                        </Row>
                        <Row>
                            <i-col :span="4">控制步长:</i-col>
                            <i-col :span="10">
                                <InputNumber :editable="false" :max="1" :min="0" :step="0.1" v-model="inputNumberType.inputNumberValue3"></InputNumber>
                                设置只读<InputNumber :editable="false" :max="1" :min="0" :step="0.1" readonly v-model="inputNumberType.inputNumberValue3"></InputNumber>
                                设置禁用<InputNumber :editable="false" :max="1" :min="0" :step="0.1" disabled v-model="inputNumberType.inputNumberValue3"></InputNumber>
                            </i-col>
                            <i-col :span="10">{{inputNumberType.inputNumberValue3}}</i-col>
                        </Row>
                    </i-col>
                </Row>
            </TabPane>
            <TabPane label="x3" name="name5" style="height: 500px;"></TabPane>
            <TabPane label="x4" name="name6" style="height: 500px;"></TabPane>
            <TabPane label="x5" name="name7" style="height: 500px;"></TabPane>
            <TabPane label="x6" name="name8" style="height: 500px;"></TabPane>
        </Tabs>

    </div>
</template>

<script>
    export default {
        name: "layout",
        data() {
            return {
                query: {
                    pageNumber: 1,
                    pageSize: 10,
                    id: null,
                    total: 0
                },
                columns7: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'id',
                        slot: 'id'
                    },
                    {
                        title: 'old',
                        key: 'old'
                    },
                    {
                        title: 'ekAddress',
                        key: 'ekAddress'
                    },
                    {
                        title: 'nameValue',
                        key: 'nameValue'
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data7: [],
                autoCompleteChange: '',
                autoCompleteData1: [
                    {
                        title: '标准问题',
                        type: 1,
                        children: [
                            {
                                title: 'iView',
                                id: 1
                            },
                            {
                                title: 'iView UI',
                                id: 2
                            }
                        ]
                    },
                    {
                        title: '业务',
                        type: 2,
                        children: [
                            {
                                title: 'iView UI 有多好',
                                id: 3
                            },
                            {
                                title: 'iView 是啥',
                                id: 4
                            }
                        ]
                    }
                ],
                backstageData: {},
                columns12: [
                    {
                        title: 'Name',
                        slot: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data6: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ],
                inputType: {
                    strType: '',
                    numType: 0
                },
                checkboxType: {
                    checkboxValue1: []
                },
                switchType: {
                    switchValue1: false,
                    switchValue2: false,
                    switchValue3: false
                },
                inputNumberType: {
                    inputNumberValue1: 0,
                    inputNumberValue2: 0,
                    inputNumberValue3: 0,
                }
            }
        },
        filters: {
        },
        created() {
            this.loadDate();
        },
        mounted() {
            this.search();
        },
        methods: {
            switchTypeValue1Change(value) {
                window.console.log(value);
            },
            checkboxValue1Change(value, action = 'check') {
                let index = this.checkboxType.checkboxValue1.indexOf(value);
                if ( action === 'check' ) {
                    if ( index === -1 ) {
                        this.checkboxType.checkboxValue1.push(value);
                    }
                }
                if ( action === 'unCheck' ) {
                    if ( index !== -1 ) {
                        this.checkboxType.checkboxValue1.splice(index, 1);
                    }
                }
            },
            changeOne(type, id) {
                window.console.log(117, type, id);
            },
            async loadDate() {
                let self = this;
                window.console.log("请求前backstageData值:", self.backstageData);
                let id = await this.getData();
                window.console.log("从后台获取的id:", id);
                self.backstageData.id = id;
                window.console.log("请求后的backstageData值:", self.backstageData);
            },
            getData() {
                let self = this;
                return new Promise((resolve, reject) => {
                    self.$axios.get("http://localhost:29001/api/axios/simple/param?id=1").then(function (response) {
                        // 延时3秒
                        setTimeout(function () {
                            resolve(response.data.id);
                        }, 3000);
                    }).catch(function () {
                        reject();
                    });
                });
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            search() {
                window.console.log("search method invoke");
                let self = this;
                self.$axios.get("http://localhost:29001/api/person/page?" + self.$qs.stringify(self.query)).then(function (response) {
                    self.data7 = response.data.rows;
                    self.query.total = response.data.total;
                    self.data7.forEach(x => {
                        if ( x.id > 20 ) {
                            x._disabled = true;
                        }
                    })
                });
            },
            download: function () {
                let url = "http://localhost:30000/easyPoi/export";
                let self = this;
                self.$axios.post(url, {"id": 232323}, {"responseType": "blob"}).then(res => {
                    if (res.status == 200) {
                        self.exportFile(res)
                    } else {
                        self.$message({
                            message: '服务器错误',
                            type: 'error',
                            duration: 2000
                        });
                    }
                })
            },
            exportFile: function (result) {
                let contentDisposition = result.headers['content-disposition'];
                // 这里后端给的内容中，文件名字可能是驼峰式名称的 fileName ，或者是全部小写的 filename
                let filename = decodeURI(contentDisposition.split('filename=')[1]);
                // 注意这里的 result.data ，如果只传 result 的话，最后下载出来的excel文件，里面显示的是 [object Object]
                let blob = new Blob([result.data], {type: result.headers['content-type']});
                // let blob = new Blob([result.data],{type: "application/x-msdownload;charset=GBK"});
                // let blob = new Blob([result.data],{type: "application/x-msdownload"});
                // let blob = new Blob([result.data]);
                // let blob = new Blob([result.data],{type: "application/vnd.ms-excel"});
                let url = window.URL.createObjectURL(blob);
                if (window.navigator.msSaveBlob) {  //IE
                    try {
                        window.navigator.msSaveBlob(blob, filename);
                    } catch (e) {
                        // 不处理
                    }
                } else {  //非IE
                    let link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = url;
                    link.setAttribute('download', filename);
                    document.body.appendChild(link);
                    link.click();
                }
                URL.revokeObjectURL(url); // 释放内存
            },
            pageChange(pageNumber) {
                this.query.pageNumber = pageNumber;
                this.search();
            },
            rowClick(row, index) {
                if (row._disabled === true) {
                    return;
                }
                // 点击循环`选中-不选中`
                this.$refs.table1.toggleSelect(index);
            },
            openSpin() {
                let self = this;
                self.$Spin.show();
                setTimeout(function () {
                    self.$Spin.hide();
                }, 3000);
            }
        }
    }
</script>

<style scoped>
    .demo-auto-complete-item{
        padding: 4px 0;
        border-bottom: 1px solid #F6F6F6;
    }
    .demo-auto-complete-group{
        font-size: 12px;
        padding: 4px 6px;
    }
    .demo-auto-complete-group span{
        color: #666;
        font-weight: bold;
    }
    .demo-auto-complete-group a{
        float: right;
    }
    .demo-auto-complete-count{
        float: right;
        color: #999;
    }
    .demo-auto-complete-more{
        display: block;
        margin: 0 auto;
        padding: 4px;
        text-align: center;
        font-size: 12px;
    }
</style>